<template>
      <div id='tree' ref='tree'></div>
</template>

<script>
import FamilyTree from '@balkangraph/familytree.js'
export default {
  name: 'tree',
  data() {
    return {
      nodes: [
        { id: 1, pids: [2], name: '毛福梅', gender: 'female', img: 'https://img1.baidu.com/it/u=1051435906,113422395&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=574' },
        { id: 2, pids: [1], name: '蒋介石', gender: 'male', img: 'https://img2.baidu.com/it/u=871384074,2973299943&fm=253&fmt=auto&app=138&f=JPEG?w=446&h=478' },
        { id: 3, mid: 1, fid: 2, name: '蒋经国', gender: 'male', img: 'https://img0.baidu.com/it/u=1685187632,1011141091&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=387' },
        { id: 4, mid: 1, fid: 2, name: '蒋纬国', gender: 'male', img: 'https://img0.baidu.com/it/u=1866174012,3651246692&fm=253&fmt=auto&app=138&f=JPEG?w=348&h=480' }
      ]
    }
  },
  methods: {
    mytree: function (domEl, x) {
      this.family = new FamilyTree(domEl, {
        nodes: x,
        nodeBinding: {
          field_0: 'name',
          img_0: 'img',
          sp_0: '生平'
        },
        nodeTreeMenu: true
      })
    }
  },
  mounted() {
    this.mytree(this.$refs.tree, this.nodes)
  }
}
</script>

    <style scoped>.window {
        width: 100%;
        height: 100vh;
    }
</style>
